<template>
	<view>
		<view class="video">
			<video id="cat" src="https://galahomework1.oss-cn-shenzhen.aliyuncs.com/live/cat.mp4" controls="true"
				autoplay="false" loop="false" enable-danmu="true" show-play-btn="true" show-center-play-btn="true"
				object-fit="cover" @timeupdate="currentTime"></video>
		</view>
		<view class="danmu">
			<view class="hd">弹幕设置</view>
			<view class="color">
				<view class="tips">颜色:</view>
				<view class="box" :style="`background-color:${style.backgroundColor}`"></view>
				<view class="btn">
					<button type="submit" size="mini" @click="randomColor">随机{{style.backgroundColor}}</button>
				</view>
			</view>
			<view class="send">
				<input class="msg" type="text" placeholder="请输入弹幕" v-model="msg"><button size="mini" class="btnsend"
					@click="send">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive
	} from 'vue';



	export default {
		setup() {

			const state = reactive({
				style: {
					backgroundColor: "#ff0000",

				},
				msg: "",
				time: 0
			})

			const cat = uni.createVideoContext("cat");
			const currentTime = (e) => {
				// console.log(e);
				state.time = e.detail.currentTime
			}

			const randomColor = () => {
				let ran = Math.random().toString(16);
				// console.log(ran);
				state.style.backgroundColor = "#" + ran.slice(-6);
			}

			const send = () => {
				if (state.msg.trim().length == 0) {
					uni.showToast({
						title: "必须填写内容"
					})
					return
				}

				//准备好弹幕
				let dm = {
					text: state.msg,
					color: state.style.backgroundColor,
					time: state.time
				}

				//发送弹幕
				cat.sendDanmu(dm);



			}

			return {
				currentTime,
				randomColor,
				...toRefs(state),
				send
			}
		}
	}
</script>

<style scoped>
	#cat {
		width: 100%;
	}

	.danmu {
		margin-top: 50rpx;
		padding: 0rpx 30rpx;

	}

	.hd {
		font-weight: bold;
		border-bottom: 1rpx solid #ccc;

	}

	.color {
		height: 120rpx;
		line-height: 120rpx;
		vertical-align: middle;
	}

	.box {
		width: 30rpx;
		height: 30rpx;
		marginTop: 5rpx;
		display: inline-block;
	}

	.color>view {
		margin-right: 20rpx;
	}

	.tips {
		display: initial;
	}


	.btn {
		width: 50rpx;
		display: initial;
		position: relative;
		top: 14rpx;
	}

	.send {
		display: flex;
		flex-flow: nowrap row;
	}

	.msg {
		flex: 6;
		background-color: #ccc;
		padding: 12rpx;
		border-radius: 12rpx;
	}

	.btnsend {
		flex: 1;
	}
</style>
